<template>
  <div>
    <el-row>
      <el-col :xs="24" :md="24" :lg="24" style="margin-bottom: 20px;">
        <el-card shadow>
          <el-date-picker v-model="dauTime" type="daterange" @change="setDauSearchDate" format="yyyy-MM-dd"  value-format="yyyy-MM-dd" split-panels placeholder="选择查询周期" style="width: 300px" />
          <span style="margin-left: 15px;">周期内活跃用户总数: {{dauTotal}}</span>
          <BasicEcharts ref="dauEcharts" style="height: 300px; margin-top: 10px;" :xAxisData="dauXAxisData" :seriesData="dauSeriesData" :text="dauTitle" :titleName="dauTitleName"/>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-card shadow>
        <el-date-picker @change="setRegCountSearchDate" type="daterange"  v-model="regCountDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  split-panels placeholder="选择查询周期" style="width: 300px" />
        <span style="margin-left: 15px;">周期内注册用户总数: {{regTotal}}</span>
        <BasicEcharts style="height: 310px; margin-top: 10px;" ref="regCountCharts" :xAxisData="regCountXAxisData" :seriesData="regCountSeriesData" :text="regCountTitle" :titleName="regCountTitleName" />
      </el-card>
    </el-row>
  </div>
</template>

<script>
import {getDate, doPostJson, doPostQs} from '@/utils/utils'
import BasicEcharts from './BasicEcharts.vue'
import * as ResponseStatus from '@/utils/response-status'

export default {
  name: 'DauEcharts',
  components: {
    BasicEcharts
  },
  data() {
    return {
      dauTitleName: '活跃用户量统计',
      dauTitle: '用户活跃量统计',
      dauXAxisData: '活跃用户',
      dauSeriesData: '',
      dauBeginDate: '',
      dauEndDate: '',
      dauTime: [],
      regCountDate: [],
      dauTotal: 0,
      regCountTitle: '新增用户',
      regCountTitleName: '新增用户量统计',
      regCountXAxisData: '',
      regCountSeriesData: '',
      regCountBeginDate: '',
      regCountEndDate: '',
      regTotal: 0,
    }
  },
  mounted() {
    this.initDauData()
    this.initRegCountData()
  },
  methods: {
    initDauData() {
      var currDate = new Date()
      // 初始化活跃用户数据
      if (this.dauBeginDate === '') {
        this.dauBeginDate = getDate(currDate,-6)
      }
      if (this.dauEndDate === '') {
        this.dauEndDate = getDate(currDate,0)
      }
      const params = {
        beginDateStr: this.dauBeginDate,
        endDateStr: this.dauEndDate
      }
      this.dauTime= [this.dauBeginDate,this.dauEndDate]
      
     doPostQs('/user-liveness-stat/dau-by-date', params, {})
        .then(res => {
          const data = res
          this.dauTitle = data.message
          this.dauXAxisData = data.data[0].xAxisData
          this.dauSeriesData = data.data[0].seriesData
          this.dauTotal = data.data[1]
          this.$refs.dauEcharts.initData()
        })
        .catch(err => {
          this.$message.error(err)
        })
    },
    initRegCountData() {
      // 初始化注册统计数据
      var currDate = new Date()
      if (this.regCountBeginDate === '') {
        this.regCountBeginDate = getDate(currDate, -6)
      }
      if (this.regCountEndDate === '') {
        this.regCountEndDate = getDate(currDate, 0)
      }
      const params = {
        beginDateStr: this.regCountBeginDate,
        endDateStr: this.regCountEndDate
      }
      this.regCountDate= [this.regCountBeginDate,this.regCountEndDate]
      doPostQs('/user-liveness-stat/reg-count-by-date', params, {})
        .then(res => {
          const data = res
          this.regCountTitle = data.message
          this.regCountXAxisData = data.data[0].xAxisData
          this.regCountSeriesData = data.data[0].seriesData
          this.regTotal = data.data[1]
          this.$refs.regCountCharts.initData()
        })
        .catch(err => {
          this.$message.error(err)
        })
    },
    setDauSearchDate(time) {
      const date = time.toString().split(",")
      this.dauBeginDate = date[0]
      this.dauEndDate = date[1]
      this.initDauData()
    },
    setRegCountSearchDate(time) {
      const date = time.toString().split(",")
      this.regCountBeginDate = date[0]
      this.regCountEndDate = date[1]
      this.initRegCountData()
    }
  }
}
</script>

<style lang="less">
</style>
